<template>
  <el-dialog v-if="load" title="操作日志" v-model="visible" align-center width="800px" @close="handleClose" :close-on-click-modal="false" class="log-dialog">
    <vxe-grid ref="tableRef" v-bind="tableOptions" class="log-table" />
    <template #footer>
      <el-button @click="close">关 闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
const load = ref(false)
const visible = ref(false)
const tableRef = ref()
const params = ref({})
// 声明接收参数
const props = defineProps({
  api: { type: Function, default: () => ([]) },
})

const fields = ref({
    user:'create_user',
    time:'create_time',
    content:'op_content'
})

const tableOptions = reactive({
  height: 560,
  pagerConfig: { pageSize: 10 },
  columns: [
    { field: fields.value.user, title: '操作人', width: 100 },
    { field: fields.value.time, title: '操作时间', width: 200, slots:{
      default:({row})=>{ return row[fields.value.time] }
    }},
    {
      field: fields.content, title: '操作说明', minWidth: 100, slots: {
        default: ({ row }) => {
          const op_content = row[fields.value.content]
          return <div>
            {
              Array.isArray(op_content) ?
                op_content.map((item, i) => (
                  <p key={i}>
                    {item.label}: {Array.isArray(item.old) ? '-' : item.old } {item.label.indexOf('人') === -1 && '=>'} {Array.isArray(item.new) ? '-' : item.new }
                  </p>
                ))
                : <div vHtml={op_content}></div>
            }
          </div>
        }
      },
    }
  ],
  proxyConfig: {
    autoLoad: false, // 是否自动加载查询数据
    props: {
      result: 'data',
      total: 'total'
    },
    ajax: {
      query: ({ page }) => {
        const {currentPage: pageNum, pageSize} = page
        return props.api({
          ...params.value,
          pageNum,
          pageSize
        })
      }
    }
  }
})

const setFields =(field)=>{
  fields.value = field
}


const emit = defineEmits(['close'])

// 打开弹窗
const open = async (obj) => {
  params.value = obj
  if (!load.value) {
    load.value = true
    await 1
  }
  visible.value = true
  await 1
  tableRef?.value.commitProxy('query')
}
// 关闭弹窗
const close = () => {
  visible.value = false
}

const handleClose = () => {
  emit('close')
}

defineExpose({ 
  open,
  setFields

 })
</script>
